<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>订单扫码出库 - WMS仓库管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
<style>
    .red {
        color: red;
    }
</style>
    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <fieldset class="layui-elem-field">
        <legend>扫码操作</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" >
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <input type="text" id="num" name="num" placeholder="物流单号 或 订单号" class="layui-input" style="width: 260px;">
                    </div>


                    <div class="layui-inline">
                        <button lay-submit="" class="layui-btn" lay-filter="scanCode">查询</button>
                        <i>总共扫码：<span id="totalCount">0</span>&nbsp;条</i>
                        <i>出库成功：<span id="successCount" style="color: red">0</span>&nbsp;条</i>
                    </div>
                    <div class="layui-inline"></div>

                </div>
            </form>



        </div>
    </fieldset>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>操作记录</span></h2>

        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>订单号</th>
                    <th>店铺</th>
                    <th>sku</th>
                    <th>数量</th>
                    <th>出库时间</th>
                    <th>收件信息</th>
                    <th>物流信息</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="sp-data">
                <input id="orderIds" type="hidden" />
<!--                <tr th:if="${totalSize == 0}">-->
<!--                    <td colspan="11" align="center" style="vertical-align:middle; text-align:center;color: red;" ><h1>没有找到数据</h1></td>-->
<!--                </tr>-->
                <tr th:each="item:${list}">
                    <td th:text="${item.id}"></td>
                    <td th:text="${item.order_num}"></td>
                    <td th:text="${item.shopName}"></td>
                    <td colspan="2">
                    <table>
                        <tr th:each="item1:${item.items}">
<!--                            <td>-->
<!--                                <img th:src="${item1.colorImage}" style="width: 50px;height: 50px;">-->
<!--                            </td>-->
<!--                            <td th:text="${item1.productNumber}"></td>-->
                            <td th:text="${item1.skuNumber}"></td>
<!--                            <td>-->
<!--                                <span th:text="${item1.colorValue}"></span>-->
<!--                                <span th:text="${item1.sizeValue}"></span>-->
<!--                            </td>-->
                            <td th:text="${item1.quantity}"></td>
                        </tr>
                    </table>
                    </td>
                    <td><b th:text="${#dates.format(item.stockOutTime * 1000, 'yyyy-MM-dd HH:mm:ss')}"></b></td>
                    <td>
                        <p>
                            <b th:text="${item.province}"></b>
                            <b th:text="${item.city}"></b>
                            <b th:text="${item.area}"></b>
                        </p>
                    </td>
                    <td>
                        <span th:text="${item.logisticsCompany}"></span><br />
                        <span th:text="${item.logisticsCode}"></span>
                    </td>
                    <td>
                        <a href="javascript:;" class="confirmReceive" th:attr="order-id=${item.id}" th:if="${item.status == 1}"> 确认出库</a>
                        <span th:if="${item.status == 3}" style="color: red"> 已经出库</span>
                    </td>

                </tr>
                </tbody>
            </table>
            <div class="pages">

            </div>
        </div>
    </div>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">

            function getDateTime(timestamp) {
                var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear();
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
            }

            function updStatus(orderId) {

                layer.msg("出库成功");
                var successCount = parseInt($("#successCount").text());
                // alert(successCount)
                successCount++;
                $("#successCount").text(successCount)
                // layer.msg(orderId);
                $("."+orderId).children('td').eq(7).html('<span style="color: red"> 出库成功</span>');
                // alert($("."+orderId).children('td').eq(7));
                $("#num").val('');
                $("#num").focus();
            }

    </script>
    <!-- end sp-wrapper -->
    <script>
        var cookieName = "coderScanList";
        var jsonObj = [];

        layui.use(['laydate', 'layer','form'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;

            form.on('submit(scanCode)', function (obj) {
                var num = $("#num").val();
                $("#num").val('');
                $("#num").focus();
                if(num == "" ) {
                    alert("请输入快递单号或订单号")
                    return false;
                }
                //alert(num)
                //ajax 请求order
                var url = "/ajax_order/get_order_by_logistics_orderNum"
                $.ajax({
                    url: url,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({key:num}),
                    success: function (res) {
                        console.log(res);
                        if(res.code == 0){

                            var html = "";
                            $(res.data).each(function (i,data) {
                                //判断订单存在吗
                                var orderIds = $("#orderIds").val();
                                // alert(orderIds)
                                var orderId = data.id;
                                if(orderIds.indexOf(orderId) >= 0){
                                    alert('订单存在');
                                }else{
                                    var cv = $.cookie(cookieName);
                                    // alert(cv);
                                    if(cv != undefined && cv != 'null') {
                                        jsonObj = eval('(' + cv + ')');
                                    }
                                    //console.log(JSON.stringify(jsonObj));
                                    // alert(JSON.stringify(jsonObj))
                                    jsonObj.push(orderId);
                                    console.log(JSON.stringify(jsonObj));
                                    // $.cookie(cookieName,null);
                                    $.removeCookie(cookieName)
                                    $.cookie(cookieName,JSON.stringify(jsonObj));
                                    // alert($.cookie(cookieName))
                                    var total = parseInt($("#totalCount").text());

                                    $("#totalCount").text(total+data.items.length);

                                    $("#orderIds").val(orderIds+orderId+',');

                                    html += '<tr class="'+data.id+'">';
                                    html += '<td >'+data.id+'</td>';
                                    html += '<td >'+data.sn+'</td>';
                                    html += '<td >'+data.s+'</td>';

                                    html += '<td colspan="2"><table>';
                                    //循环商品展示
                                    for(var i=0;i<data.items.length;i++){
                                        html += '<tr> ';
                                        html += '<td >'+data.items[i].sN+'</td>';
                                        html += '<td >'+data.items[i].qty+'</td>';
                                        html += '</tr>';
                                    }
                                    html += '</table></td>';

                                    html += '<td >'+getDateTime(data.t * 1000)+'</td>';
                                    html += '<td>'+data.ad  +'</td>'
                                    html += '<td><b style="color: #06213B">'+data.k+'</b> </td>';
                                    if(data.st == 0){
                                        html += '<td><span style="color: #eb7350"> 待处理</span></td>';
                                    }
                                    else if(data.st == 1){
                                        html += '<td><a href="javascript:;" class="confirmReceive" order-id="'+data.id+'"> 确认出库</a></td>';
                                    }else if(data.st == 3){
                                        html += '<td><span style="color: red"> 已出库</span></td>';
                                    }
                                    else if(data.st == 4){
                                        html += '<td><span style="color: red"> 已发货</span></td>';
                                    }

                                    html += "</tr>"
                                    $("#sp-data").prepend(html);
                                }


                                // alert(JSON.stringify(data))
                            })

                            //自动弹出第一个
                            if(res.data != null && res.data.length > 0){
                                if(res.data[0].st == 1){
                                    layer.open({
                                        type: 2,
                                        title: '确认出库',
                                        shadeClose: true,
                                        shade: 0.8,
                                        area: ['940px', '90%'],
                                        content: '/fahuo/order_scan_delivery_confirm?orderId='+res.data[0].id,  //iframe的url
                                        end : function() {
                                            $("#num").val('');
                                            $("#num").focus();
                                        }
                                    });
                                }
                            }
                            // alert(JSON.stringify(res.data));
                            return false;
                        }else {
                            alert.alert(res.msg);
                            return false;
                        }
                    },
                    error:function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                        return false;
                    }
                });

                // layer.open({
                //     type: 2,
                //     title: '确认出库',
                //     shadeClose: true,
                //     shade: 0.8,
                //     area: ['940px', '90%'],
                //     content: '/fahuo/order_scan_delivery_confirm?orderId=0'  //iframe的url
                // });

                return false;//false：阻止表单跳转  true：表单跳转
            });
            $(function () {
                $("#num").focus();
                var cv = $.cookie(cookieName);

                console.log(cv);
                // alert(cv);
                if(cv != undefined && cv != 'null'){
                    var orderIdArr={"orderIdArr":JSON.parse(cv)};
                    $.ajax({
                        url: "/ajax_order/get_order_by_orderIdArr",
                        type: "POST",
                        dataType: "JSON",
                        contentType: 'application/json',
                        data: JSON.stringify(orderIdArr),
                        success: function (res) {
                            if (res.code == 0) {
                                // alert("有数据");
                                var html = "";
                                //var jv = eval('(' + cv + ')');
                                var orderIds = $("#orderIds").val();
                                var totalCount = 0;
                                $.each(res.data, function (i, data) {
                                    totalCount++;
                                    orderIds += data.id + ",";
                                    html += '<tr class="' + data.id + '">';
                                    html += '<td >' + data.id + '</td>';
                                    html += '<td >' + data.sn + '</td>';
                                    html += '<td >' + data.s + '</td>';

                                    html += '<td colspan="2"><table>';
                                    //循环商品展示
                                    for (var i = 0; i < data.items.length; i++) {
                                        html += '<tr> ';
                                        html += '<td >' + data.items[i].sN + '</td>';
                                        html += '<td >' + data.items[i].qty + '</td>';

                                        html += '</tr>';
                                    }
                                    html += '</table></td>';

                                    html += '<td >' + getDateTime(data.t * 1000) + '</td>';
                                    html += '<td>' + data.ad + '</td>'
                                    html += '<td><b style="color: #06213B">' + data.k + '</b> </td>';
                                    //html += '<td><span style="color: red"> </span></td>';
                                    if (data.st == 0) {
                                        html += '<td><span style="color: #eb7350"> 待处理</span></td>';
                                    } else if (data.st == 1) {
                                        html += '<td><a href="javascript:;" class="confirmReceive" order-id="' + data.id + '"> 待出库</a></td>';
                                     } else if (data.st == 3) {
                                        html += '<td><span style="color: red"> 已出库</span></td>';
                                     } else if (data.st == 4) {
                                         html += '<td><span style="color: red"> 已发货</span></td>';
                                    }

                                    html += "</tr>"
                                });
                                $("#orderIds").val(orderIds);
                                $("#totalCount").text(totalCount);
                                $("#sp-data").prepend(html);
                            }
                        }
                    })
                }
                // var orderId = [[${orderId}]];
                // if(orderId > 0){
                //     layer.open({
                //         type: 2,
                //         title: '确认出库',
                //         shadeClose: true,
                //         shade: 0.8,
                //         area: ['940px', '90%'],
                //         content: '/fahuo/order_scan_delivery_confirm?orderId=' + orderId //iframe的url
                //     });
                //
                // }

                //$("#mainbody").on("click",".link",function(){});

                $("#sp-data").on("click",".confirmReceive",function () {
                    var orderId = $(this).attr("order-id");
                    // alert(orderId)
                    // var orderId = [[${orderId}]];
                    if(orderId > 0){
                        layer.open({
                            type: 2,
                            title: '确认出库',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['940px', '90%'],
                            content: '/fahuo/order_scan_delivery_confirm?orderId=' + orderId //iframe的url
                        });
                    }else{
                        alert("orderId错误")
                    }
                    // if(confirm("是否确定出库？")){
                    //     $.ajax({
                    //         url: '/ajax_stock_out/order_stock_out_confirm',
                    //         type: 'post',
                    //         dataType: 'json',
                    //         contentType: 'application/json',
                    //         data: JSON.stringify({id:orderId}),
                    //         success: function (res) {
                    //             console.log(res);
                    //             if(res.code == 0){
                    //                 alert("确认成功");
                    //                 window.location.reload();
                    //             }else
                    //                 Tips.alert(res.msg);
                    //         }
                    //     });
                    // }

                });
            });
        })

    </script>
</div>
</body>
<html>
